<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" href="__PUBLIC__/admin/css/pintuer.css">
    <link rel="stylesheet" href="__PUBLIC__/admin/css/admin.css">
    <script src="__PUBLIC__/admin/js/jquery.js"></script>
    <script src="__PUBLIC__/admin/js/pintuer.js"></script>
</head>
<body>
<div class="panel admin-panel">
    <div class="panel-head" id="add"><strong><span class="icon-pencil-square-o"></span><a href="{:U('Index/showMenu')}">  返回</a></strong></div>
    <div class="body-content">
        <form method="post" class="form-x" action="{:U('Index/update')}" id="uploadForm">
            <div class="form-group">
                <div class="label">
                    <label >菜名：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" value="{$dish.dish_name}" name="dish_name" data-validate="required:请输入菜名"/>
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <select class="selectpicker" name="classify_id">
                    <foreach name="classify" item="vo" >
                        <option value="{$vo.classify_id}">{$vo.classify_name}</option>
                    </foreach>
                </select>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>图片：</label>
                </div>
                <div class="field">
                    <div id="preview">

                        <img id="imghead" class="imghead" name="imghead" border="0" src="__ROOT__/{$dish.dish_icon}" width="90" height="90" onclick="$('#previewImg').click();">
                        <div class="tips">点图片上传 仅支持jpg、gif、png、bmp、jpeg，且小于1MB。</div>

                    </div>

                    <input type="file" name="upfile" onchange="previewImage(this)" style="display: none;" id="previewImg" >
                </div>
            </div>


<!--            <div class="form-group">
                <div class="label">
                    <label>菜品数量：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" value="{$dish.dish_num}" name="dish_num" data-validate="required:请输入菜品数量"/>
                    <div class="tips"></div>
                </div>
            </div>-->
            <div class="form-group">
                <div class="form-group">
                    <div class="label">
                        <label>菜品单价：</label>
                    </div>
                    <div class="field">
                        <input type="text" class="input w50" value="{$dish.dish_price}" name="dish_price"
                               data-validate="required:请输入菜品单价"/>
                        <div class="tips"></div>
                    </div>
                </div>


                <div class="label">
                    <label>菜品描述：</label>
                </div>
                <div class="field">
                    <textarea class="input" name="dish_description" style=" height:280px;">{$dish.dish_description}</textarea>
                    <div class="tips"></div>
                </div>
            </div>
            <input type="hidden" name="dish_id" value="{$dish.dish_id}">
            <input type="hidden" name="imgUrl"  id="imgUrl" value="{$dish.dish_icon}">
            <div class="form-group">
                <div class="label">
                    <label></label>
                </div>
                <div class="field">
                    <button class="button bg-main icon-check-square-o" type="submit" id="submit"> 提交</button>
                </div>
            </div>

            <form/>
    </div>
</div>
<script type="text/javascript">
    jQuery(function ($) {
        $('#birthday').datepicker({
            format: 'yyyy-mm-dd',
            weekStart: 1,
            autoclose: true,
            todayBtn: 'linked',
            language: 'cn'
        });
    });
    //图片上传预览    IE是用了滤镜。
    function previewImage(file)
    {
        var formData = new FormData($( "#uploadForm" )[0]);
        var show="发生错误了";
        var result = 0;
        $.ajax({
            type : "post",
            url : "{:U('Index/upload')}",
            data : formData,
            dataType : "text",
            async:false,
            contentType: false,
            processData: false,
            //dataType:json,
            error:function (data) {
                alert(data);

            },
            success : function(data) {
                var results = eval('('+data+')');
                result = results.result;
                show = results.show;

                /* for(var i =0;i<bookComment.size;i++){
                 alert(bookComment.toString()+'~~~~');
                 }*/
            },
        });
        if(result==1){
            $("#imgUrl").val("Uploads/Images/"+show)

/*
            $("#submit").after("<input type='hidden' name='headimgurl' id='headimgurl'  value=Uploads/Images/"+show+">");
*/
            var MAXWIDTH  = 90;
            var MAXHEIGHT = 90;
            var div = document.getElementById('preview');
            if (file.files && file.files[0])
            {
                div.innerHTML ='<img id=imghead onclick=$("#previewImg").click()>';
                var img = document.getElementById('imghead');
                img.onload = function(){
                    var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                    img.width  =  rect.width;
                    img.height =  rect.height;
//                 img.style.marginLeft = rect.left+'px';
                    img.style.marginTop = rect.top+'px';
                }
                var reader = new FileReader();
                reader.onload = function(evt){img.src = evt.target.result;}
                reader.readAsDataURL(file.files[0]);
            }
            else //兼容IE
            {
                var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
                file.select();
                var src = document.selection.createRange().text;
                div.innerHTML = '<img id=imghead>';
                var img = document.getElementById('imghead');
                img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
                div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
            }
        }else {
            alert(show);
        }


    }
    function clacImgZoomParam( maxWidth, maxHeight, width, height ){
        var param = {top:0, left:0, width:width, height:height};
        if( width>maxWidth || height>maxHeight ){
            rateWidth = width / maxWidth;
            rateHeight = height / maxHeight;

            if( rateWidth > rateHeight ){
                param.width =  maxWidth;
                param.height = Math.round(height / rateWidth);
            }else{
                param.width = Math.round(width / rateHeight);
                param.height = maxHeight;
            }
        }
        param.left = Math.round((maxWidth - param.width) / 2);
        param.top = Math.round((maxHeight - param.height) / 2);
        return param;
    }
</script>
</body>
</html>